<script lang="ts">
  import { ROUTER_PATHS, useRouter } from '@/constants/router';
  import { FOLLOW_STATUS } from '@/enum/dynamic.enum';
  import { useStore } from '@/store';
  import { UserInfo, UserModule } from '@/store/modules/user.module';
  import { computed, defineComponent, PropType } from '@vue/composition-api';
  import FollowButton from './follow-button.vue';

  type PropsType = {
    userInfo: UserInfo;
    otherData: Record<string, any>;
    customBottom: boolean;
    showFollowButton: boolean;
  };
  export default defineComponent({
    components: {
      FollowButton
    },
    props: {
      userInfo: {
        type: Object as PropType<PropsType['userInfo']>,
        require: true
      },
      otherData: {
        type: Object as PropType<PropsType['otherData']>,
        require: false,
        default: () => {
          return {};
        }
      },
      customBottom: {
        type: Boolean as PropType<PropsType['customBottom']>,
        default: false
      },
      showFollowButton: {
        type: Boolean as PropType<PropsType['showFollowButton']>,
        default: false
      }
    },
    setup(_, { emit }) {
      const router = useRouter();
      const userModule = useStore(UserModule);

      function toPersonal() {
        router.navigateTo({
          url: ROUTER_PATHS.PERSONAL,
          params: {
            id: _.userInfo?.id
          }
        });
      }

      const isSelf = computed(() => {
        return userModule.userInfo.id === _.userInfo?.id;
      });

      function changeStatus(status: FOLLOW_STATUS) {
        emit('changeFollowStatus', status);
      }
      return {
        isSelf,
        toPersonal,
        changeStatus
      };
    }
  });
</script>

<template>
  <view class="user-header">
    <image class="avartar" :src="userInfo.avatarUrl" @click.stop="toPersonal" />
    <view class="user-info" @click.stop="toPersonal">
      <view class="nick-name">{{ userInfo.nickName }}</view>
      <view class="time" v-if="!customBottom">{{ otherData.time | getTime }}</view>
      <slot v-if="customBottom"></slot>
    </view>
    <view class="follow">
      <template v-if="showFollowButton && !isSelf">
        <follow-button :status="otherData.status" @change="changeStatus"> 关注 </follow-button>
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .user-header {
    display: flex;
    position: relative;

    .avartar {
      width: 80rpx;
      height: 80rpx;
      background-color: #999999;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .user-info {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .nick-name {
        /* 主要正文 */

        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 28rpx;
        line-height: 39rpx;

        /* 主要文字 */

        color: #333333;
      }

      .time {
        /* 说明文字（大） */

        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 34rpx;
        /* identical to box height */

        /* 次要文字 */

        color: #999999;
      }
    }

    .follow {
      position: absolute;
      right: 38rpx;
      /* display: flex; */
      transform: translateY(-50%);
      top: 50%;
    }
  }
</style>
